<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      
      function formatName(user) {
            return user.firstName + ' ' + user.lastName;
      }
      
      const user = {
            firstName: 'Harper',
            lastName: 'Perez'
      };

      // const element = (
        
        function getGreeting(user) {
          if (user) {
            return <h1> Hello, {formatName(user)}!</h1>;
          } else {
            return <h1>Hello，Stranger!</h1>
          }
        }
        
      // );

      

      ReactDOM.render(
        // <h1>Hello, world!</h1>,
        // element,
        getGreeting(user),
        document.getElementById('root')
      );

    </script>
  </body>
</html>